<template>
	<a-dropdown trigger="click" class="app-theme">
		<span>
			{{ $t('common.theme.title') }}
			<CaretDownOutlined size="18" />
		</span>
		<template #overlay>
			<a-menu
				@click="handleToggleTheme"
				v-model:selectedKeys="selectedKeys"
				class="app-theme__body"
			>
				<a-menu-item
					v-for="item in items"
					:name="item.codeName"
					:key="item.codeName"
				>
					{{ item.caption }}
				</a-menu-item>
			</a-menu>
		</template>
	</a-dropdown>
</template>

<script setup lang="ts">
import { IParam } from '@/core';
import { toggleTheme } from '@zougt/vite-plugin-theme-preprocessor/dist/browser-utils';
import { CaretDownOutlined, CheckOutlined } from '@ant-design/icons-vue';
const items: IParam[] = App.getAppThemeConfig();
const selectedKeys = ref<string[]>([]);

onMounted(() => {
	const codeName = localStorage.getItem('theme-class');
	if (codeName) {
		selectedKeys.value = [codeName];
	}
});

const handleToggleTheme = ({ key }: IParam) => {
	toggleTheme({ scopeName: key });
	selectedKeys.value = [key];
	localStorage.setItem('theme-class', key);
};
</script>
